<template>
	<view>
		<view class="u-skeleton">
			<!-- 有客户组时选择 -->
			<view class="grid-box" v-if="enterpriseList.length > 0" @click="showEnterprise = true">
				<view class="head-title u-align-items u-p-b-20">
					<text class="u-flex-1">账户</text>
					<text class="u-tips-color u-font-24">本次订单会结算到您对应的账户</text>
				</view>
				<view class="my-address u-m-b-10">
					<view class="item">
						<view class="top">
							<view class="name u-skeleton-rect u-flex-1 u-p-r-30">{{account.name}}</view>
							<u-icon name="arrow-right" :size="32" class="u-tips-color"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<!-- 选择地址 -->
			<view class="grid-box" @click="showAddress">
				<view class="head-title u-align-items u-p-b-20">
					<text class="u-flex-1">上门地址</text>
					<text class="u-tips-color u-font-24">步梯3楼以上暂不提供上门回收服务</text>
				</view>
				<view class="my-address u-m-b-10">
					<view class="item" v-for="(res, index) in siteList" :key="index">
						<view class="top" :class="res.isaccept?'':'none'">
							<view class="name u-skeleton-rect">{{ res.name }}</view>
							<view class="phone u-skeleton-rect">{{ res.mobile }}</view>
							<view class="tag">
								<text v-for="(item, index) in res.tag" :key="index" :class="{'bg-gradual-blue':item.tagText=='默认'}">{{ item.tagText }}</text>
							</view>
						</view>
						<view class="bottom u-skeleton-rect" :class="res.isaccept?'':'none'">
							{{res.address}}
							<text class="iconfont icon-qiehuangongsi" style="font-size: 40rpx;color: #d3d3d3;padding-left: 20px;"></text>
						</view>
						<view class="support u-p-t-20" v-if="!res.isaccept">
							<u-icon name="info-circle-fill"></u-icon><text class="u-p-l-10">当前地址不在服务范围内，请选择其他地址</text>
						</view>
					</view>
					<view class="item" v-if="siteList.length == 0">
						<view class="u-flex">
							<view class="u-flex-1">
								<u-icon name="map-fill" :size="32" color="#c0c4cc"></u-icon>
								<text style="color: #c0c4cc">请选择收货地址</text>
							</view>
							<u-icon name="arrow-right" :size="32" class="u-tips-color"></u-icon>
						</view>
					</view>
				</view>
			</view>
			<view class="grid-box">
				<view class="head-title u-skeleton-rect">
					<text>选择品类(多选)</text>
					<!-- <text class="tip u-font-28 u-p-t-0" style="font-weight: bold;">10KG起上门回收</text> -->
				</view>
				<!-- <view class="u-p-t-20 u-skeleton-rect"><text class="tip u-font-28">10KG起上门回收</text></view> -->
				<!-- 选择类型 -->
				<view class="choose-low u-p-t-0">
					<view class="con">
						<view class="item" :class="item.choose?'on':''" v-for="(item,index) in chooseType" :key="index"
							@tap="chooseTypeItem(item)">
							<view class="ico u-m-b-10">
								<u-image class="u-skeleton-fillet" width="100rpx" height="100rpx" :src="item.icon" shape="circle"></u-image>
								<view class="mark" v-if="item.choose"><u-icon class="icon" name="checkbox-mark"
										:color="'#fff'" size="14"></u-icon></view>
								<view class="mark not" v-else></view>
							</view>
							<view class="name u-line-1">{{item.names}}</view>
						</view>
						<view class="u-m-b-10 u-m-t-20" v-if="!Authorization" @click="isWechat = true">
							<view class="u-flex" style="width: 630rpx;">
								<view class="u-flex-1">
									<!-- <u-icon name="grid-fill" :size="32" color="#c0c4cc"></u-icon> -->
									<text style="color: #c0c4cc">请先选择收货地址</text>
								</view>
								<u-icon name="arrow-right" :size="40" color="#999999"></u-icon>
							</view>
						</view>
					</view>
				</view>
				<!-- 选择数量 -->
				<!-- <template v-if="chooseTypeArr.length > 0">
					<view class="head-title u-p-b-10"><text>选择数量</text></view>
					<view v-for="(cell,i) in chooseTypeArr" :key="cell.id">
						<view class="u-tips-color"><text class="u-font-24">{{cell.name}}</text></view>
						<view class="choose-weight u-m-b-10">
							<view class="con">
								<view class="item" :class="item.choose?'on':''" v-for="(item,index) in cell.range"
									:key="item.id" @tap="chooseWeightItem(cell,item)">
									<view class="mark"><u-icon class="icon" name="checkbox-mark" :color="'#fff'"
											size="14"></u-icon>
										<view class="c"></view>
									</view>
									<template v-if="item.id > 0">
										<text>{{item.min}}-{{item.max}}{{cell.isweighing?'KG':'件'}}</text>
									</template>
									<template v-else>
										<text>其他</text>
									</template>
								</view>
							</view>
						</view>
					</view>
				</template> -->
				<!-- 拍照上传 -->
				<!-- <template v-if="isPhoto"> -->
					<view class="head-title"><text>拍照上传：<text class="u-font-24">(最多上传2张，每张照片不大于5M)</text></text></view>
					<view class="upload-box u-m-b-10 u-m-t-10">
						<view class="u-flex">
							<view class="example-box" @click="seeTempImg(tempImgSrc)">
								<u-tag class="tag" text="示例" type="error" mode="dark" size="mini"/>
								<u-image class="img" :src="tempImgSrc" width="140" height="140" @click="seeTempImg(tempImgSrc)"></u-image>
							</view>
							<view>
								<common-upload max-count="3" @on-success="uploadSuccess" @on-remove="removePhoto"></common-upload>
							</view>
						</view>
					</view>
				<!-- </template> -->
				<!-- <view class="head-title u-skeleton-rect"><text>选择时间</text></view>
				<view class="choose-time u-p-t-20 u-p-b-20">
					<view class="u-flex" @click="show = true">
						<view class="u-flex-1">
							<view class="text-con"><text class="u-font-28 u-skeleton-rect">实际到达时间需与小哥或线上客服确定</text></view>
						</view>
						<view>
							<text class="u-font-28 u-skeleton-rect">{{date.timetype}}</text>
							<u-icon class="icon" name="arrow-right" :color="'#999999'" size="28"></u-icon>
						</view>
					</view>

					<view class="u-flex text-con u-m-t-20 u-font-28" v-if="date.timetype != '尽快上门'">
						<view class="u-flex-1"><text>指定日期：</text><text>{{date.day}}</text></view>
						<view class="u-flex-1 u-text-right"><text>指定时间：</text><text>{{date.time}}</text></view>
					</view>
				</view> -->
				
				<!-- <template v-if="total.min != '-' || total.max != '-'">
					<view class="head-title"><text>预估回收金额</text></view>
					<view class="text-con u-m-t-20 u-m-b-20">
						<text class="text-orange">￥</text>
						<text class="u-font-36 price text-orange"
							style="font-weight: bold;">{{total.min}}~{{total.max}}<text class="u-font-24">起</text></text>
					</view>
				</template> -->
				<view class="u-p-b-10">
					<u-alert-tips type="warning" :description="'下单后请等待小哥与您确定上门时间，感谢您的理解。'"></u-alert-tips>
				</view>
				<!-- 回收与微信登录 -->
				<u-alert-tips v-if="order.qrcode" type="warning" :show-icon="true" :description="'此订单将绑定回收码'+order.qrcode"></u-alert-tips>
				<view class="u-m-t-10 u-m-b-10 u-skeleton-rect">
					<u-button type="primary" @click="$u.debounce(confirmOrderFunction, 100)">一键回收</u-button>
				</view>

				<view class="tip u-font-24 u-text-center u-skeleton-rect">废品回收后，不支持退回，请知悉。</view>
			</view>
			<!-- 今日参考价&历史成交价 -->
			<view class="button-group-list">
				<view class="g-button u-btn" @click="showTodayPrice = true"><i class="iconfont icon-dingdan u-m-r-10"></i><text>今日参考价</text></view>
				<!-- <view class="g-button u-btn" @click="showHistoryPrice = true"><i class="iconfont icon-feizhi u-m-r-10"></i><text>历史成交价</text></view> -->
			</view>
			<!-- 标语 -->
			<view class="grid-box">
				<view class="head-title"><text>高价回收服务</text></view>
				<view class="high-price">
					<view class="item">
						<text class="iconfont icon-qianbao bg u-font-52"></text>
						<view class="text">
							<view class="t1"><text>即时拿钱</text></view>
							<view class="t2"><text>回收即时拿收益</text></view>
						</view>
					</view>
					<view class="item">
						<text class="iconfont icon-xiaogeshangmen bg u-font-52"></text>
						<view class="text">
							<view class="t1"><text>高价回收</text></view>
							<view class="t2"><text>明价回收不骗称</text></view>
						</view>
					</view>
					<view class="item">
						<text class="iconfont icon-yuyuehuishou bg u-font-52"></text>
						<view class="text">
							<view class="t1"><text>省时省心</text></view>
							<view class="t2"><text>上门服务不操心</text></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!--引用骨架屏组件-->
		<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#f3f4f6" el-color="#ffffff"></u-skeleton> -->
		<view class="u-p-t-30 u-p-b-30 u-text-center u-tips-color"><text>青猿回收</text><text v-if="version" class="u-font-20 u-p-l-20">V{{version}}</text></view>
		
		<!-- 提交订单 -->
		<!-- <u-popup v-model="show" mode="bottom" border-radius="14" :closeable="true" z-index="9999">
			<view class="set-time-box">
				<view class="u-font-32 u-text-center">选择预计上门时间</view>
			</view>
			<timeMenu @swichday="swichday"></timeMenu>
		</u-popup> -->
		<!-- 选择日期 -->
		<u-calendar v-model="show2" mode="date" max-date="2200-01-01" @change="setTime"
			active-bg-color="#2ab6b3"></u-calendar>
		<!-- 确认订单信息 -->
		<u-popup v-model="confirmOrder" mode="bottom" border-radius="14" :closeable="true" z-index="9998">
			<view class="confirm-order u-p-t-40">
				<view class="u-text-center u-p-t-30">
					<view class="u-m-r-10">
						<u-icon name="question-circle-fill" size="120" class="u-type-warning"></u-icon>
					</view>
					<view class="u-font-36">确认订单</view>
				</view>
				<view class="u-p-b-80 u-p-t-15 u-text-center u-font-28 u-tips-color"><text>请确认以下订单信息</text></view>
				<view class="my-address u-m-b-20 u-m-l-32 u-m-r-32" @click="showAddressList = true">
					<view class="item" v-for="(res, index) in siteList" :key="res.id">
						<view class="top">
							<view class="name">{{ res.name }}</view>
							<view class="phone">{{ res.mobile }}</view>
							<view class="tag">
								<text v-for="(item, index) in res.tag" :key="index"
									:class="{'bg-gradual-blue':item.tagText=='默认'}">{{ item.tagText }}</text>
							</view>
						</view>
						<view class="bottom">
							{{res.address}}
							<text class="iconfont icon-qiehuangongsi" style="font-size: 40rpx;color: #d3d3d3;"></text>
						</view>
					</view>
				</view>
				<u-cell-group>
					<!-- <u-cell-item :arrow="false" v-for="(item,index) in chooseTypeArr" :key="index">
						<view slot="title">
							<view class="u-font-30 u-main-color"><text class="goods-name">{{item.name}}</text></view>
							<view class="u-font-24 u-tips-color" v-for="(cell,i) in item.range" :key="i">
								<text v-if="item.isweighing">选择重量：{{cell.min}}-{{cell.max}}KG</text>
								<text v-else>选择件数：{{cell.min}}-{{cell.max}}件</text>
							</view>
						</view>
						<text class="u-font-28">
							<text class="goods-price">￥{{item.minuserprice}}-{{item.highuserprice}}元/{{ item.isweighing? 'KG':'件'}}</text>
						</text>
						<view class="price-tag">
							<text class="item bg-gradual-blue">参考回收单价</text>
						</view>
					</u-cell-item> -->
					
					<u-cell-item title="回收品类" :arrow="false" v-if="chooseTypeArr.length > 0">
						<view class="u-flex" style="justify-content: flex-end">
							<!-- <view class="u-p-l-10" v-for="(item,index) in chooseTypeArr" :key="index">
								<u-image :src="item.icon" width="100" height="100" shape="circle">
									<u-loading slot="loading"></u-loading>
								</u-image>
								<view><text>{{item.names}}</text></view>
							</view> -->
							<u-tag
								class="u-m-l-5"
								v-for="(item,index) in chooseTypeArr" 
								:key="index"
								:text="item.names" 
								type="info" 
							/>
						</view>
					</u-cell-item>
					<!-- <u-cell-item title="上门回收时间" :arrow="false" @click="show = true">
						<view v-if="date.timetype == '尽快上门'">
							<text class="u-font-28">{{date.timetype}}</text>
						</view>
						<view v-else>
							<text class="u-font-28 u-m-r-20">{{date.day}}</text>
							<text class="u-font-28">{{date.time}}</text>
						</view>
					</u-cell-item> -->
					<u-cell-item title="拍照上传" :arrow="false" v-if="order.pics.length > 0">
						<view class="u-flex" style="justify-content: flex-end">
							<view class="u-p-l-10" v-for="(item,index) in order.pics" :key="index">
								<u-image :src="imgURL(item)" width="100" height="100" @click="seePhoto(index)">
									<u-loading slot="loading"></u-loading>
								</u-image>
							</view>
						</view>
					</u-cell-item>
				</u-cell-group>
				<view class="tips"><text>回收价格是根据市场变化实时变更，下单后小哥上门对物品进行确认也会对价格产生波动，当前页面价格仅供参考，具体以订单确认价格为准。</text></view>
				<view class="navigation-sticky-box">
					<view class="navigation u-p-b-0 u-m-b-0">
						<view class="left">
							<!-- <view class="u-text-left u-flex-1 u-p-l-40">
								<view><text class="u-font-24 u-tips-color">预估回收金额：</text></view>
								<text class="text-orange">￥</text>
								<text class="u-font-36 price text-orange">{{total.min}}~{{total.max}}<text class="u-font-24">起</text></text>
							</view> -->
							<view class="u-text-left u-flex-1 u-p-l-40">
								<view><text class="u-font-24 u-tips-color">共回收品类数：</text></view>
								<text class="u-font-36 price text-orange">{{chooseTypeArr.length}}<text class="u-font-24">种</text></text>
							</view>
						</view>
						<view class="right" @tap="$u.throttle(submitOrder, 1000)">
							<view class="buy btn u-line-1 bg-gradual-blue">确认提交</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 选择客户组（个人） -->
		<u-popup v-model="showEnterprise" mode="bottom" border-radius="14" :closeable="true" height="80%">
			<view class="u-font-36 u-text-center u-p-t-60 u-p-b-20">选择账户下单</view>
			<u-cell-group>
				<u-cell-item :arrow="true" :title="res.name" v-for="(res, index) in enterpriseList" :key="res.id" @click="chooseEnterprise(res)">
					<view slot="label">{{res.id > 0?'其他账户':'个人账户'}}</view>
				</u-cell-item>
			</u-cell-group>
		</u-popup>
		<!-- 选择地址 -->
		<u-popup v-model="showAddressList" mode="bottom" border-radius="14" :closeable="true" height="80%">
			<view class="u-font-36 u-text-center u-p-t-60">选择上门地址</view>
			<selectAddress
				v-if="isLogin"
				:acaddress="order.addressid" 
				:siteList="addressList" 
				:isLogin="isLogin"
				@chooseAddress="chooseAddress"
				@update="getAddressList">
			</selectAddress>

			<button v-else class="u-reset-button u-btn bg-gradual-blue u-m-t-10 u-m-b-10 addSite"
				open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">
				<view class="add"><u-icon name="weixin-fill" color="#ffffff" class="icon"
						:size="30"></u-icon><text>微信登录获取地址</text></view>
			</button>
		</u-popup>
		<!-- 今日参考价 -->
		<u-popup v-model="showTodayPrice" mode="bottom" border-radius="14" z-index="9998" length="80%">
			<view class="u-p-30">
				<text class="u-font-32">今日参考价</text>
				<view class="tips u-m-r-0 u-m-l-0 u-m-b-30">
					<text>回收价格是根据市场变化实时变更，下单后小哥上门对物品进行确认也会对价格产生波动，当前页面价格仅供参考，具体以订单确认价格为准。</text>
				</view>
				<price-table v-if="showTodayPrice == true" @online="online" @shop="goShop"></price-table>
			</view>
		</u-popup>
		<!-- 历史成交价 -->
		<u-popup v-model="showHistoryPrice" mode="bottom" border-radius="14" z-index="9998" length="80%">
			<view class="u-p-30">
				<text class="u-font-32">历史成交价</text>
				<view class="tips u-m-r-0 u-m-l-0 u-m-b-30"><text>近期价格变动参考，具体以订单确认价格为准。</text></view>

				<view class="historyPrice">
					<view class="item u-border-bottom" :class='{"on":item.on}' v-for="(item, index) in chooseType"
						:key="index" @click="changeCollapse(index,item)">
						<view class="hd">
							<view class="u-flex">
								<view class="u-flex-1">
									<view class="u-flex">
										<u-image width="50rpx" height="50rpx" :src="item.icon" shape="circle"></u-image>
										<text class="u-m-l-10">{{item.name}}</text>
									</view>
								</view>
								<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
							</view>
						</view>
						<view class="bd">
							<view v-for="(cell,i) in ProductList[index]" :key="i">
								<text class="title">{{cell.name}}</text>
								<u-table>
									<u-tr>
										<u-th style="height: 80rpx;">时间</u-th>
										<u-th style="height: 80rpx;">地区价格</u-th>
										<u-th style="height: 80rpx;">回收价格(元/{{item.isweighing?'KG':'件'}})</u-th>
									</u-tr>
									<u-tr v-for="(con,k) in cell.price" :key="k">
										<u-td>
											<text>{{$u.timeFormat(con.effectivedate.replaceAll('-','/'), 'yyyy年mm月dd日')}}</text>
										</u-td>
										<u-td>{{con.citynames.split(',')[con.citynames.split(',').length - 1]}}</u-td>
										<u-td>
											<text>{{con.userprice.toFixed(2)}}</text>
										</u-td>
									</u-tr>
								</u-table>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 弹出登录方式 -->
		<login-wechat :isWechat="isWechat" @close="closeLogin" @update="updateData"></login-wechat>
	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapActions
	} from 'vuex';
	import selectAddress from './selectAddress.vue'
	// import timeMenu from './components/timeMenu.vue'
	export default {
		components: {
			selectAddress
			// timeMenu
		},
		data() {
			return {
				loading: true,
				tid: 0,
				list: [{
						name: '上门回收'
					},
					{
						name: '自送网点'
					}
				],
				mycurrent: 0,
				showTodayPrice: false, //今日参考价显示
				showHistoryPrice: false, //历史成交价显示
				itemStyle: {
					marginTop: '10px'
				},
				bodyStyle: {
					minHeight: '100px'
				},
				ProductList: [],
				ProductPriceList: [],
				// 客户组列表
				showEnterprise: false,
				enterpriseList: [],
				account:{
					name: ''
				},
				// 拍照
				fileList: [

				],
				// 选择
				current: 1,
				show: false,
				show2: false,
				confirmOrder: false,
				showAddressList: false,
				// 选择品类
				chooseType: [
					
				],
				// 默认地址
				siteList: [
					
				],
				// 地址列表
				addressList: [],
				// 选择品类重量范围
				goods: [

				],
				// 上门时间
				date: {
					timetype: '尽快上门',
					day: '',
					time: '',
				},
				isPhoto: false,
				// 计算预估收益
				total: {
					min: '-',
					max: '-'
				},
				// 提交表单参数
				order: {
					enterpriseid: 0,
					pics: [],
					addressid: 0,
					doortime: '',
					estimated: [
						//   {
						// id: 0,
						// rangeId: 0
						//   }
					],
					qrcode: '',
					details: []
				},
				chooseTypeArr: [],
				isLogin: false,
				version: "",
				isWechat: false,
				tempImgSrc: this.baseURL + '/example/1.jpg',
				fileUploadURL: getApp().globalData.fileUploadURL
			}
		},
		computed: {
			...mapState({
				header: state => state.Authorization,
				Authorization: state => state.Authorization,
				userdetail: state => state.userdetail,
			})
		},
		created() {
			// #ifdef MP-WEIXIN
			this.version = wx.getAccountInfoSync().miniProgram.version
			// #endif
			// this.tid = opt.tid
			
			// 判断是否有回收码
			// if(opt.barcode){
			// 	this.order.qrcode = opt.barcode
			// }
		},
		mounted() {
			// 考虑到添加地址后返回这里要更新地址，所以获取地址列表写在这里
			this.initData()
			
			// setTimeout(()=>{
			// 	this.loading = false
			// },500)
			
			// console.log('文件上传地址-mounted：',this.fileUploadURL)
		},
		watch: {
			showAddressList(state) {
				if (state) {
					// if (this.addressList.length == 0) {
					// 	this.getAddressList().catch((err) => {
					// 		this.isLogin = false
					// 	})
					// }
					if(uni.getStorageSync('lifeData').Authorization){
						this.isLogin = true
						this.getAddressList()
					}else{
						this.isLogin = false
					}
				}
			},
			showTodayPrice(state) {
				if (state) {
					
				}
			},
			showHistoryPrice(state) {
				if (state) {
					
				}
			}
		},
		methods: {
			async initData(){
				console.log('上门回收页面数据更新中...',this.Authorization)
				this.order = {
					pics: [],
					addressid: 0,
					doortime: '',
					estimated: [],
					qrcode: '',
					details: []
				}
				this.confirmOrder = false
				this.siteList = []
				this.fileList = []
				this.enterpriseList = []
				this.account.name = ''
				// this.$refs.upload.clear()
				// this.loading = true
				try {
					//获取回收品类
					await this.getGoodsType()
					
					// this.showAddressList = false
					if(this.Authorization != ''){
						await this.$store.dispatch('getDetails').then((res)=>{
							// if(res.refresh == true){
								// this.isWechat = true
							// }
							this.isLogin = true
							
							let enterpriselist = res.bindinfo.enterpriselist
							if(enterpriselist.length > 0){
								this.enterpriseList = []
								enterpriselist.forEach((item)=>{
									this.enterpriseList.push({
										name: `${item.name}(${item.department})`,
										id: item.id
									})
								})
								this.enterpriseList.push({
									name: this.userdetail.name,
									id: 0
								})
								console.log('this.enterpriseList',this.enterpriseList)
								if(uni.getStorageSync('chooseEnterpriseAccount')){
									let chooseId = uni.getStorageSync('chooseEnterpriseAccount').id
									if(this.enterpriseList.filter((item)=>item.id == chooseId).length > 0){
										this.account.name = this.enterpriseList.find((item)=>item.id == chooseId).name
										this.order.enterpriseid = this.enterpriseList.find((item)=>item.id == chooseId).id
									}
								}else{
									this.account.name = this.enterpriseList[0].name
									this.order.enterpriseid = this.enterpriseList[0].id
									
									uni.setStorageSync('chooseEnterpriseAccount',{
										name: this.account.name,
										id: this.order.enterpriseid
									})
								}
							}
						})
						
						await this.getAddressList()
					}else{
						this.siteList = []
					}
				} catch (err) {
					console.log('页面加载数据异常:',err)
				}
				console.log('全部加载完成...')
				// setTimeout(()=>{
					// this.loading = false
				// },500)
			},
			online(){
				this.showTodayPrice = false
				this.$emit('tab',0)
			},
			goShop(){
				this.showTodayPrice = false
				this.$emit('tab',1)
			},
			orderrecovery() {
				console.log("触发了")
				// wx.reportEvent("order_recovery", {
				// 	"role": "下单页面点击一键回收按钮",
				// 	"type": this.userdetail.type,
				// 	"mobile": this.userdetail.mobile,
				// 	"usename": this.userdetail.name,
				// })
			},
			// 弹出选择地址
			showAddress() {
				console.log('弹出选择地址',this.userdetail)
				if (uni.getStorageSync('lifeData').Authorization) {
					this.showAddressList = true
				} else {
					this.isWechat = true
				}
			},
			closeLogin(val) {
				this.isWechat = val
			},
			updateData(token) {
				this.initData()
			},
			// 计算预估收益
			calculateprice() {
				let chooseType = this.chooseType.filter((item) => item.choose)

				let minPrice = 0
				let maxPrice = 0
				
				// 按最少上门重量10KG计算预估回收金额
				chooseType.forEach((item, index) => {
					minPrice += item.minuserprice * 10
					maxPrice += item.highuserprice * 10
					// minPrice += 0.5 * 10
					// maxPrice += 1 * 10
				})
				if (!isNaN(minPrice) || !isNaN(maxPrice)) {
					this.total.min = minPrice.toFixed(2)
					this.total.max = maxPrice.toFixed(2)
				}
			},
			onGetPhoneNumber(e) {
				if (e.detail.errMsg == 'getPhoneNumber:ok') {
					uni.login({
						provider: 'weixin', //使用微信登录
						success: (res) => {
							if (res.code) {
								this.$u.get('/User/Account/WXLoginOrReg', {
									code: res.code,
									phonecode: e.detail.code
								}).then((res) => {
									console.log(res)
									if (res.login == 0) { //已有账号时直接登录
										this.$u.vuex('Authorization', res.token.token)
										this.$u.vuex('exp', res.token.exp)
										this.$u.vuex('userdetail', {
											enterpriseid: res.token.enterpriseid,
											userid: res.token.userid
										})
										
										this.isLogin = true
										console.log('isLogin:', this.isLogin)

										this.getAddressList().then(() => {
											this.confirmOrderFunction()
										})
									} else if (res.login == 1) { //否则注册
										uni.navigateTo({
											url: `/pages/login/weixinAuth/weixinAuth?mobile=${res.mobile}&openid=${res.openid}`
										})
									} else { //询问是否绑定微信
										uni.showModal({
											content: '您的手机号码已经绑定其他微信号，是否改为绑定现在的微信号?',
											success: (mod) => {
												if (mod.confirm) {
													this.$u.get(
														'/User/Account/ComfirmBindingWeiXing?mobile=' +
														res.mobile).then((res) => {
														this.$u.vuex('Authorization',res.token.token)
														this.$u.vuex('exp', res.token.exp)
														this.$u.vuex('userdetail', {
															enterpriseid: res.token.enterpriseid,
															userid: res.token.userid
														})
														
														this.isLogin = true

														this.getAddressList().then(() => {
															this.confirmOrderFunction()
														})
													})
												} else if (mod.cancel) {
													console.log('用户点击取消');
												}
											}
										})
									}
								})
							} else {
								console.log('登录失败！' + res.errMsg)
								uni.showToast({
									title: '登录失败',
									icon: 'none'
								})
							}
						}
					})
				} else {
					console.log('您拒绝获取手机号码')
				}
			},
			getAddressList() {
				console.log('加载用户地址...')
				return this.$u.get('/User/Address/List').then((res) => {
					if (res.length > 0) {
						this.addressList = res

						if(this.addressList.filter((item)=>item.isdefault).length > 0){
							this.siteList = this.addressList.filter((item)=>item.isdefault)
						}else{
							this.siteList = [this.addressList[0]]
						}
						
						if(this.order.addressid == 0){
							const cityId = this.siteList[0].cityid
							this.order.addressid = this.siteList[0].id
							// this.getCreateInfo(cityId)
						}
						
					}else{
						this.siteList = []
						this.addressList = []
						this.order.addressid = 0
					}
				})
			},
			// 选择地址
			chooseAddress(item) {
				console.log(item)
				this.siteList = []
				this.siteList.push(item)
				this.order.addressid = item.id
				// this.getCreateInfo(item.cityid)
				this.showAddressList = false
			},
			//线上单创建前获取相关信息
			// getCreateInfo(cityId){
			// 	this.$u.get(`/User/Order/GetCreateInfo?userId=${this.userdetail.id}&cityId=${cityId}`).then((res)=>{
			// 		console.log('线上单创建前获取相关信息',res)
			// 		if(res.type.length > 0){
			// 			this.chooseType = res.type
			// 			this.chooseType.forEach((item) => {
			// 				item.choose = false
			// 				item.icon = this.fileURL + item.icon
			// 				item.on = false
			// 			})
			// 		}
			// 		if(res.enterprise.length > 0){
			// 			this.enterpriseList = []
			// 			res.enterprise.forEach((item)=>{
			// 				this.enterpriseList.push({
			// 					name: `${item.name}(${item.department})`,
			// 					id: item.id
			// 				})
			// 			})
			// 			this.enterpriseList.push({
			// 				name: this.userdetail.name,
			// 				id: 0
			// 			})
			// 			console.log('this.enterpriseList',this.enterpriseList)
			// 			if(uni.getStorageSync('chooseEnterpriseAccount')){
			// 				let chooseId = uni.getStorageSync('chooseEnterpriseAccount').id
			// 				if(this.enterpriseList.filter((item)=>item.id == chooseId).length > 0){
			// 					this.account.name = this.enterpriseList.find((item)=>item.id == chooseId).name
			// 					this.order.enterpriseid = this.enterpriseList.find((item)=>item.id == chooseId).id
			// 				}
			// 			}else{
			// 				this.account.name = this.enterpriseList[0].name
			// 				this.order.enterpriseid = this.enterpriseList[0].id
							
			// 				uni.setStorageSync('chooseEnterpriseAccount',{
			// 					name: this.account.name,
			// 					id: this.order.enterpriseid
			// 				})
			// 			}
			// 		}
			// 	})
			// },
			changeCollapse(itemIndex, itemCollapse) {
				itemCollapse.on = !itemCollapse.on
				// console.log('changeCollapse:',index)
				this.$u.get('/Waste/Product/List', {
					typeId: itemCollapse.id,
					pid: 0,
					key: ''
				}).then((res) => {
					console.log(res)
					this.ProductList[itemIndex] = res
					this.$forceUpdate()

					this.ProductList[itemIndex].forEach((item, index) => {
						this.$u.post('/Waste/Price/List', {
							pageIndex: 1,
							pageSize: 5,
							key: '',
							productId: item.id,
							cityId: 0,
							date: ''
						}).then((res) => {
							item.price = res.rows
							// this.ProductPriceList[itemIndex] = res.rows
							this.$forceUpdate()
							console.log(this.ProductPriceList)
						})
					})
				})
			},

			imgURL(img,full = false) {
				return this.fileURL + img
			},
			setTime(obj) {
				console.log(obj.result)
				// this.submitOrder()
				this.time = obj.result
				this.show = false
			},
			// 图片上传
			uploadSuccess(data, index, lists, name) {
				uni.hideLoading()
				// this.showUploadList = false
				if (data.status == 2) {
					// this.$refs.upload.clear()
					uni.showModal({
						title: '提示',
						content: '请先登录再上传图片',
						success: (res) => {
							if (res.confirm) {
								this.isWechat = true
							}
						}
					})
					return
				}
				this.order.pics.push(data.datas.path);
			},
			removePhoto(index, lists, name) {
				// this.fileList.splice(index, 1)
				this.order.pics.splice(index, 1)
				// console.log(this.fileList)
			},
			// 选择账户（可选时）
			chooseEnterprise(item){
				if(item.id > 0){ //大于0为其他(原企业)账户
					this.order.enterpriseid = item.id
					this.account.name = this.enterpriseList.find((cell)=>cell.id == item.id).name
				}else{
					this.order.enterpriseid = 0
					this.account.name = this.userdetail.name
				}
				uni.setStorageSync('chooseEnterpriseAccount',{
					id:this.order.enterpriseid,
					name: this.account.name
				})
				this.showEnterprise = false
			},
			// 确认订单
			confirmOrderFunction() {
				this.orderrecovery()
				if (this.userdetail.id == 0) {
					this.isWechat = true
					return
				}
				// 判断是否选择上门地址
				if (this.order.addressid == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择上门地址'
					})
					return
				}
				// 判断所选地址不在服务范围内
				if (!this.siteList[0].isaccept) {
					uni.showToast({
						icon: 'none',
						title: '当前地址不在服务范围内，请选择其他地址'
					})
					return
				}
				// 判断是否选择品类
				if (this.order.estimated.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择品类'
					})
					return
				}
				// 判断是否选择重量
				var isRangeId = false
				try {
					// this.order.estimated.forEach((item) => {
					// 	if (!item.rangeId && item.rangeId != 0) {
					// 		uni.showToast({
					// 			icon: 'none',
					// 			title: '请选择重量'
					// 		})
					// 		isRangeId = true
					// 		throw Errow();
					// 	}

					// 	// if(item.rangeId == 0){
						
					// 	// }
					// })
					if (this.order.pics.length == 0) {
						uni.showToast({
							icon: 'none',
							title: '请至少上传一张拍照'
						})
						isRangeId = true
						throw Errow();
					}
				} catch (e) {
					// console.log(e)
				}
				if (isRangeId) {
					return
				}
				this.calculateprice()


				// 是否拍照上传
				// if(this.isPhoto){
				// this.total.min = '-'
				// this.total.max = '-'
				// }else{
				// this.order.pics = []
				// this.fileList = []
				// }

				this.confirmOrder = true

			},
			// 提交订单
			submitOrder() {
				// wx.reportEvent("confirm_submission", {
				// 	"usename": this.userdetail.name,
				// 	"mobile": this.userdetail.mobile,
				// 	"type": this.userdetail.type,
				// })
				uni.showLoading({
					mask: true,
					title: '提交中...'
				})
				
				// 判断是否为客户组下单
				// if(this.userdetail.lastloginenterpriseid > 0){
				// 	this.order.enterpriseId = this.userdetail.lastloginenterpriseid
				// }
				
				this.$u.post('/User/Order/Create', this.order).then((res) => {
					uni.hideLoading()
					console.log((res))
					// #ifdef MP-WEIXIN
					wx.requestSubscribeMessage({
						tmplIds: ['bFPNidvYjyenA3lfRr1zaiHJ9J4aXPTgoLgfbNbSsZ0',
							'tdeIJZm_nc7XnwlTbMZEMqeYz1Tlmh75PDSUAutoYXM',
							'N-4TTJe2M6QQG41Mq3Eggz2oUjCz0ZNCqevarfe_fQE'
						],
						complete: (res) => {

						}
					})
					// #endif
					uni.showToast({
						title: '下单成功'
					})
					this.initData()
					// setTimeout(()=>{
					uni.navigateTo({
						url: '/pages/my/order/order'
					})
					// },800)
				}).catch(() => {
					uni.hideLoading()
				})
			},
			// 选择时间
			// swichday(item) {
			// 	console.log(item)
			// 	this.date.timetype = item.timetype

			// 	this.date.day = item.day;
			// 	this.date.time = item.time;
			// 	if (item.time == '尽快上门') {
			// 		this.order.doortime = ''
			// 	} else {
			// 		this.order.doortime = item.day + ' ' + item.time.split('-')[1]
			// 	}
			// 	this.show = item.show;

			// },
			// 获取回收品类
			getGoodsType() {
				console.log('获取回收品类...')
				if(this.chooseType.length > 0){
					return Promise.resolve(this.chooseType)
				}
				return this.$u.get('/Waste/Type/List').then((res) => {
					this.chooseType = res.filter((item)=>item.usestate == "已启用")
					this.chooseType.forEach((item) => {
						item.choose = false
						item.icon = this.fileURL + item.icon
						item.on = false
					})
				})
			},
			// 选择品类
			chooseTypeItem(item) {
				item.choose = !item.choose
				if (item.choose) {
				} else {
					this.total.min = "-"
					this.total.max = "-"
				}
				this.chooseTypeArr = this.chooseType.filter(item => item.choose)
				if (this.chooseTypeArr.length == 0) {
					this.isPhoto = false
					this.order.pics = []
					this.fileList = []
				} else {
					this.isPhoto = true
				}
				this.order.estimated = []
				this.chooseType.forEach((item, index) => {
					if (item.choose && item.id > 0) {
						// this.order.estimated.push({
						// 	id: item.id
						// })
						this.order.estimated.push(item.id)
						console.log('estimated:', this.order.estimated)

						// item.range.forEach((cell) => { //已选中的重量赋值rangeId
						// 	if (cell.choose) {
						// 		this.order.estimated.find(c => c.id == item.id).rangeId = cell.id
						// 	}
						// })
					}
				})
				this.calculateprice()
				this.$forceUpdate()
			},
			// 选择重量
			chooseWeightItem(cell, item) {
				// console.log('cell:',cell)
				cell.range.map((c) => {
					// c.choose = false
					this.$set(c, 'choose', false)
				})
				this.$set(item, 'choose', true)
				// item.choose = true
				// 判断是否拍照上传，只要选中了重量按钮就显示
				this.isPhoto = false
				this.chooseType.forEach((item) => {
					item.range.forEach((cell) => {
						// if(cell.choose && cell.id == 0){
						// 	this.isPhoto = true
						// }
						if (cell.choose) {
							this.isPhoto = true
						}
					})

					//已选择照片未提交时，重新选中“拍照上传”按钮显示已选择的照片
					// if(this.order.pics.length > 0){
					// 	this.order.pics.forEach((item)=>{
					// 		this.fileList.push({
					// 			url: this.fileURL+item
					// 		})
					// 	})
					// }
				})

				this.order.estimated.filter(item => item.id == cell.id)[0].rangeId = item.id
				// 过滤重量选择拍照上传的品类列表
				// this.order.estimated = this.order.estimated.filter(item=>item.rangeId != 0)
				this.calculateprice()
				this.$forceUpdate()
			},
			seePhoto(index) {
				let urls = []
				this.order.pics.forEach((item) => {
					urls.push(this.fileURL + item)
				})
				uni.previewImage({
					current: index,
					urls: urls
				});
			},
			seeTempImg(url){
				console.log('点击示例图片:',url)
				uni.previewImage({
					urls: [url]
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep {
		.u-th {
			height: 80rpx;
		}
		.u-add-btn{
			background-color: #fff;
			padding: 16rpx;
			border-radius: 50%;
			box-shadow: 0 0 5px #d6d6d6;
		}
		.u-add-tips{
			margin-top: 10rpx!important;
		}
		.u-icon__icon{
			// font-size: 32rpx!important;
		}
	}

	// 选择时间
	.set-time-box {
		padding: 80rpx 0;
	}

	// 地址
	.my-address {
		background-color: #fff;

		.item {

			// padding: 40rpx 20rpx;
			.support {
				color: $u-tips-color;
			}

			.none {
				opacity: 0.4;
			}

			.top {
				display: flex;
				font-weight: bold;
				font-size: 32rpx;

				.phone {
					margin-left: 50rpx;
				}

				.tag {
					display: flex;
					font-weight: normal;
					align-items: center;

					text {
						display: block;
						width: 60rpx;
						height: 34rpx;
						line-height: 34rpx;
						color: #ffffff;
						font-size: 20rpx;
						border-radius: 6rpx;
						text-align: center;
						margin-left: 30rpx;
						background-color: rgb(49, 145, 253);
					}

					.red {
						background-color: red
					}
				}
			}

			.bottom {
				display: flex;
				margin-top: 20rpx;
				font-size: 28rpx;
				justify-content: space-between;
				color: $u-tips-color;
			}
		}

		.addSite {
			display: flex;
			justify-content: space-around;
			width: 600rpx;
			line-height: 100rpx;
			// position: absolute;
			// bottom: 30rpx;
			// left: 80rpx;
			background-color: red;
			border-radius: 60rpx;
			font-size: 30rpx;

			.add {
				display: flex;
				align-items: center;
				color: #ffffff;

				.icon {
					margin-right: 10rpx;
				}
			}
		}
	}

	// 模拟按钮
	.u-btn {
		font-size: 30rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 10rpx;
	}

	// 宫格展示
	.grid-box {
		background-color: #fff;
		margin: 0 30rpx;
		padding: 30rpx;
		border-radius: 24rpx;
		margin-top: 30rpx;
		box-shadow: $u-color-border-shadow;

		&.mt {
			position: relative;
			top: -170rpx;
			margin-bottom: -120rpx;
		}

		&.mt2 {
			position: relative;
			top: -76rpx;
			margin-bottom: -120rpx;
		}

		.head-title {
			font-size: 32rpx;
			display: flex;
			justify-content: space-between;

			.more {
				color: $u-tips-color;
			}
		}
	}

	// 选择类型
	.choose-low {
		background-color: #fff;
		padding: 30rpx 0 30rpx;
		display: flex;
		align-items: center;
		overflow: hidden;

		.con {
			// display: flex;
			// overflow: auto;
			// flex-wrap: wrap;
			// column-gap: 60rpx;
			width: 700rpx;
			margin-right: -70rpx;

			.item {
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				// flex: 1 0 calc(25% - 60rpx); /* 确保每个子元素占据25%宽度减去gap的一半*/
				text-align: center;
				position: relative;
				margin-top: 30rpx;
				display: inline-block;
				margin-right: 65rpx;

				.ico {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					// border: 1px solid;
					border-radius: 50%;
					position: relative;
				}

				.name {
					// margin-top: 20rpx;
					width: 110rpx;
				}

				.mark {
					width: 28rpx;
					height: 28rpx;
					background-color: $u-color-main;
					border-radius: 50%;
					position: absolute;
					right: 0;
					bottom: 0;
					display: flex;
					align-items: center;
					justify-content: center;

					&.not {
						background-color: #fff;
						border: 1px solid $u-color-main;
					}
				}

				&.on {
					.ico {
						border-color: $u-color-main;
						// background-color: $u-color-main;
						// color: #fff;
					}

					color: $u-color-main;
				}
			}
		}
	}

	.button-group-list {
		// margin-top: 30rpx;
		padding: 30rpx;
		padding-bottom: 0;
		display: flex;
		align-items: center;

		.g-button {
			flex: 1;
			text-align: center;
			background-color: #fff;
			box-shadow: $u-color-border-shadow;
			display: flex;
			justify-content: center;
		}
	}

	// 选择重量
	.choose-weight {
		display: flex;
		width: 626rpx;
		overflow: auto;

		.small-title {
			font-size: 28rpx;
		}

		.con {
			flex: 1;
			display: flex;
			// height: 80rpx;
			margin: 0 -10rpx;

			.item {
				// flex: 1;
				text-align: center;
				margin: 20rpx 10rpx;
				border: 1px solid $u-border-color;
				line-height: 64rpx;
				font-size: 28rpx;
				border-radius: 12rpx;
				position: relative;
				overflow: hidden;
				width: 180rpx;

				.mark {
					display: none;
					// border: 20rpx solid $u-color-main;
				}

				&.on {
					border-color: $u-color-main;

					.mark {
						display: block;
						position: absolute;
						bottom: -16rpx;
						right: 0;

						.icon {
							position: relative;
							z-index: 9;
						}

						.c {
							border: 16rpx solid #2ab6b3;
							border-top-color: transparent;
							border-left-color: transparent;
							position: absolute;
							bottom: 16rpx;
							right: 0;
						}
					}
				}
			}
		}
	}

	// 选择时间
	.choose-time {
		.text-con {
			font-size: 24rpx;
			color: $u-tips-color;
		}
	}

	// 高价回收服务
	.high-price {
		display: flex;

		.item {
			flex: 1;
			text-align: center;
			margin: 30rpx 0;

			.iconfont {
				font-size: 72rpx;
			}

			.text {
				flex: 1;
				margin-top: 10rpx;

				.t1 {
					font-size: 32rpx;
					margin-bottom: 10rpx;
				}

				.t2 {
					font-size: 24rpx;
					color: $u-tips-color;
				}
			}
		}
	}

	// 回收指南
	.guide {
		.list-con {
			display: flex;
			padding: 30rpx 0;

			.item {
				flex: 1;
				text-align: center;

				.icon {
					width: 68rpx;
					height: 68rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					margin: 0 auto 10rpx;
					border-radius: 50%;
					background: #ffe8a8;
				}

				.arrow-ico {
					color: #666;
				}

				.name {
					font-size: 24rpx;
				}

				.iconfont {
					// color: #fff;
				}
			}
		}

		.u-btn {
			font-size: 30rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			border-radius: 60rpx;
		}
	}

	// 提交订单栏
	.navigation-sticky-box {
		position: sticky;
		z-index: 99;
		bottom: 0;
		background: #fff;
		padding-bottom: 20rpx;

		.navigation {
			display: flex;
			width: 700rpx;
			// background-color: #ffffff;
			padding: 20rpx 0 30rpx;
			margin: 10rpx auto;

			.left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				flex: 1;
				background-color: #fff;
				border-top-left-radius: 50rpx;
				border-bottom-left-radius: 50rpx;
				box-shadow: $u-color-border-shadow;

				.item {
					margin: 0 30rpx;
					display: flex;

					.icon {
						position: relative;
					}

					&.car {
						text-align: center;
						position: relative;

						.car-num {
							position: absolute;
							top: -10rpx;
							right: -10rpx;
						}
					}
				}
			}

			.right {
				display: flex;
				font-size: 28rpx;
				align-items: center;

				.btn {
					line-height: 100rpx;
					padding: 0 30rpx;
					border-radius: 50rpx;
					color: #ffffff;
					border-top-left-radius: 0;
					border-bottom-left-radius: 0;
					width: 240rpx;
					text-align: center;
				}

				.cart {
					background-color: #ed3f14;
					margin-right: 30rpx;
				}

				.buy {
					background-color: #ff7900;
				}
			}
		}
	}

	// 确认订单
	.confirm-order {
		max-height: 90vh;

		.price {
			font-weight: bold;
		}

		.bold {
			font-weight: bold;
		}

		.goods-name {
			font-weight: bold;
		}

		.goods-price {
			color: $u-color-orange;
			font-size: 32rpx;
			font-weight: bold;
		}


		.price-tag {
			display: flex;
			justify-content: flex-end;

			.item {
				display: block;
				padding: 0 10rpx;
				height: 34rpx;
				line-height: 34rpx;
				color: #ffffff;
				font-size: 20rpx;
				border-radius: 6rpx;
				text-align: center;
				margin-left: 30rpx;
				background-color: #3191fd;
			}
		}
	}

	// 上传照片
	.u-upload {
		margin: 0 -10rpx;
	}

	// 提示
	.tips {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 16rpx 30rpx;
		border-radius: 8rpx;
		position: relative;
		transition: all 0.3s linear;
		border: 1px solid #fff;
		background-color: #fdf6ec;
		border-color: #fcbd71;
		font-size: 26rpx;
		text-align: left;
		color: #606266;
		margin: 30rpx 30rpx 0 30rpx;
	}

	// 历史成交价格
	.historyPrice {
		.item {
			margin-bottom: 30rpx;
			padding-bottom: 30rpx;

			.title {
				margin: 20rpx 0;
				display: flex;
				font-size: 32rpx;
			}

			.bd {
				display: none;
			}

			&.on .bd {
				display: block;
			}
		}
	}

	.addSite {
		display: flex;
		justify-content: space-around;
		width: 600rpx;
		height: 100rpx;
		position: absolute;
		bottom: 30rpx;
		left: 80rpx;
		background-color: red;
		border-radius: 60rpx;
		font-size: 30rpx;

		.add {
			display: flex;
			align-items: center;
			color: #ffffff;

			.icon {
				margin-right: 10rpx;
			}
		}
	}

	.text-orange {
		color: $u-color-orange;
	}
	
	// 示例
	.example-box{
		position: relative;
		border-radius: 20rpx;
		overflow: hidden;
		margin-right: 5rpx;
		.tag{
			position: absolute;
			top: 0rpx;
			left: 0;
			z-index: 99;
		}
	}
</style>